---
title: Xác thực
description: Xác thực người dùng của bạn
---

# Xác thực

## Cung cấp quyền truy cập xác thực vào ứng dụng của bạn

Bạn có thể tuỳ chọn bắt buộc người dùng ký một tin nhắn bằng ví của họ trong quá trình kết nối, chứng minh rằng họ sở hữu tài khoản đã được kết nối và cho phép bạn tạo một phiên người dùng xác thực với quyền truy cập đặc biệt vào ứng dụng của bạn.

Trong khi có thể [tích hợp với các back-end tuỳ chỉnh và định dạng tin nhắn,](/docs/custom-authentication) RainbowKit cung cấp hỗ trợ hàng đầu cho [Đăng nhập bằng Ethereum](https://login.xyz) và [NextAuth](https://next-auth.js.org).

### Thiết lập Đăng nhập bằng Ethereum và NextAuth

#### Cài đặt

Cài đặt gói `@rainbow-me/rainbowkit-siwe-next-auth`.

```bash
npm install @rainbow-me/rainbowkit-siwe-next-auth
```

#### Thiết lập nhà cung cấp

Trong thành phần `App` của bạn, nhập `RainbowKitSiweNextAuthProvider`.

```tsx
import { RainbowKitSiweNextAuthProvider } from '@rainbow-me/rainbowkit-siwe-next-auth';
```

Bọc `RainbowKitProvider` với `RainbowKitSiweNextAuthProvider`, đảm bảo nó được lồng trong `SessionProvider` của NextAuth để nó có quyền truy cập vào phiên.

```tsx
import { RainbowKitSiweNextAuthProvider } from '@rainbow-me/rainbowkit-siwe-next-auth';
import { RainbowKitProvider } from '@rainbow-me/rainbowkit';
import { SessionProvider } from 'next-auth/react';
import type { Session } from 'next-auth';
import { AppProps } from 'next/app';
import { WagmiProvider } from 'wagmi';
import {
  QueryClientProvider,
  QueryClient,
} from "@tanstack/react-query";

const queryClient = new QueryClient();

export default function App({
  Component,
  pageProps,
}: AppProps<{
  session: Session;
}>) {
  return (
    <WagmiProvider {...etc}>
      <SessionProvider refetchInterval={0} session={pageProps.session}>
        <QueryClientProvider client={queryClient}>
          <RainbowKitSiweNextAuthProvider>
            <RainbowKitProvider {...etc}>
              <Component {...pageProps} />
            </RainbowKitProvider>
          </RainbowKitSiweNextAuthProvider>
        </QueryClientProvider>
      </SessionProvider>
    </WagmiProvider>;
  );
}
```

Với `RainbowKitSiweNextAuthProvider` được thiết lập, người dùng của bạn sẽ được yêu cầu xác thực bằng cách ký một tin nhắn sau khi họ đã kết nối ví.

#### Tuỳ chỉnh các tuỳ chọn tin nhắn SIWE

Bạn có thể tùy chỉnh [tùy chọn thông điệp SIWE](https://viem.sh/docs/siwe/utilities/createSiweMessage#parameters) bằng cách truyền một hàm vào thuộc tính `getSiweMessageOptions` trên `RainbowKitSiweNextAuthProvider`.

Hàm này sẽ được gọi bất cứ khi nào một tin nhắn mới được tạo. Các tùy chọn trả về từ hàm này sẽ được kết hợp với những mặc định.

```tsx
import {
  RainbowKitSiweNextAuthProvider,
  GetSiweMessageOptions,
} from '@rainbow-me/rainbowkit-siwe-next-auth';

const getSiweMessageOptions: GetSiweMessageOptions = () => ({
  statement: 'Sign in to my RainbowKit app',
});

<RainbowKitSiweNextAuthProvider
  getSiweMessageOptions={getSiweMessageOptions}
>
  ...
</RainbowKitSiweNextAuthProvider>;
```

#### Truy cập phiên từ phía máy chủ

Bạn có thể truy cập mã thông báo phiên với hàm `getToken` của NextAuth được nhập từ `next-auth/jwt`. Nếu người dùng đã xác thực thành công, thuộc tính `sub` của mã thông báo phiên (đối tượng "chủ thể" của mã, tức là người dùng) sẽ là địa chỉ của người dùng.

Bạn cũng có thể chuyển đối tượng phiên đã giải quyết từ máy chủ thông qua `getServerSideProps` để NextAuth không cần phải giải quyết lại trên phía máy khách.

Ví dụ:

```tsx
import { GetServerSideProps, InferGetServerSidePropsType } from 'next';
import { getSession } from 'next-auth/react';
import { getToken } from 'next-auth/jwt';
import React from 'react';

export const getServerSideProps: GetServerSideProps = async context => {
  const session = await getSession(context);
  const token = await getToken({ req: context.req });

  const address = token?.sub ?? null;
  // If you have a value for "address" here, your
  // server knows the user is authenticated.

  // You can then pass any data you want
  // to the page component here.
  return {
    props: {
      address,
      session,
    },
  };
};

type AuthenticatedPageProps = InferGetServerSidePropsType<
  typeof getServerSideProps
>;

export default function AuthenticatedPage({
  address,
}: AuthenticatedPageProps) {
  return address ? (
    <h1>Authenticated as {address}</h1>
  ) : (
    <h1>Unauthenticated</h1>
  );
}
```

Để biết thêm thông tin về quản lý phiên, bạn có thể tham khảo tài liệu sau:

- [Hướng dẫn xác thực Next.js](https://nextjs.org/docs/pages/guides/authentication)
- [Tài liệu NextAuth](https://next-auth.js.org)
